<template>
  <div class="hero-head-list" v-show="isShow">
    <FSMask>
      <div class="head-list mask">
        <h4>
          选择一个头像
          <div>
            <img :src="avatar.src" />
          </div>
        </h4>
        <div class="img-list">
          <div
            v-for="item in data"
            class="img-item"
            :key="item.id"
            :class="{ selected: item.id === avatar.id }"
            @click="headClick(item)"
          >
            <img :src="item.src" />
          </div>
        </div>
        <div class="operate">
          <Button type="primary" size="large" @click="successClick">确定</Button>
          <Button type="warning" size="large" @click="isShow = false">取消</Button>
        </div>
      </div>
    </FSMask>
  </div>
</template>
<script>
import FSMask from '../../common/FSMask.vue'
import Button from '../../common/Button.vue'

export default {
  components: { FSMask, Button },
  emits: ['change'],
  props: ['data', 'current'],
  data() {
    return {
      isShow: false,
      avatar: {
        id: 0, src: ''
      },
    }
  },
  created() {
    this.avatar.id = this.current.id
    this.avatar.src = this.current.src
  },
  methods: {
    headClick(item) {
      this.avatar.id = item.id
      this.avatar.src = item.src
    },
    successClick() {
      this.$emit('change', this.avatar)
      this.isShow = false
    }
  }
}
</script>
<style lang="less" scoped>
@import "../../../theme.less";
.head-list {
  width: 70vw;
  border: 1px solid @theme-line;
  padding: 20px;
  border-radius: 10px;
  background-color: @theme;
  h4 {
    font-size: 30px;
    color: @theme-line;
    padding-bottom: 20px;
  }
}
.hero-head-list {
  // display: flex;
  // flex-wrap: wrap;
  img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
  }
  .img-list {
    display: flex;
    flex-wrap: wrap;
    .img-item {
      margin-right: 10px;
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
  .selected {
    transform: scale(1.1);
    box-shadow: 0 0 4px 2px @theme-line;
  }
}
</style>